<template>
  <section class="blog-one blog-one__home thm-gray-bg" id="news">
    <div class="container">
      <div class="block-title text-center">
        <h2 class="block-title__title">实时新闻</h2><!-- /.block-title__title -->
      </div><!-- /.block-title -->
      <div class="row">
        <div class="col-lg-4 col-md-12 col-sm-12 wow fadeInUp" data-wow-duration="1500ms" v-for="item in data">
          <div class="blog-one__single">
            <div class="blog-one__image" @click="gotoDetail(item.id)">
              <img :src="item.cover" alt="">
              <a class="blog-one__more-link"><i class="fa fa-link"></i>
                <!-- /.fa fa-link --></a>
            </div><!-- /.blog-one__image -->
            <div class="blog-one__content">
              <ul class="list-unstyled blog-one__meta">
                <li><a href="#">{{ item.publishTime }}</a></li>
                <li><a href="#">{{ item.visitNum }} 次浏览</a></li>
              </ul><!-- /.list-unstyled -->
              <h3 class="blog-one__title two-line-ellipsis">
                <nuxt-link :to="`/blog-details?id=${item.id}`">{{ item.title }}</nuxt-link>
              </h3><!-- /.blog-one__title -->
              <nuxt-link :to="`/blog-details?id=${item.id}`" class="blog-one__link">查看详情</nuxt-link><!-- /.blog-one__link -->
            </div><!-- /.blog-one__content -->
          </div><!-- /.blog-one__single -->
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
    </div><!-- /.container -->
  </section>
</template>

<script>
import apis from '../apis/apis';

export default {
  name: "BlogHome",
  data() {
    return {
      params: {
        'page': 1,
        'limit': 3,
        'order': 'desc'
      },
      data: []
    }
  },
  methods: {
    getData() {
      apis.getNewsData(this.params).then(res => {
        this.data = res.data.list;
      })
    },
    gotoDetail(id) {
      this.$router.push(`/blog-details?id=${id}`);
    }
  }
}
</script>

<style scoped>
.two-line-ellipsis {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  text-overflow: ellipsis;

}
</style>
